<!-- wachtQuote 微信报价 -->
<template>
	<div>
		<div class="head">
			<div class="title"><span>微信报价</span></div>
			<div class="sanj"></div>
		</div>
		<div class="form">
			<ul>
				<li>在哪个城市？</li>
				<li><select v-model="row.city"><option v-for="(item, index) in cityList" :key="index">{{item.name}}</option></select></li>
				<li>宝宝出生了没有？</li>
				<li>
					<label><input type="radio" name="isType" :value="false" v-model="row.work_type"><span></span>还没呢</label>
					<label><input type="radio" name="isType" :value="true" v-model="row.work_type"><span></span>已出生</label>
				</li>
				<li>请输入微信绑定手机号</li>
				<li><input type="number" name="phone" placeholder="请输入微信绑定手机号" v-model="row.phone"></li>
				<li><span class="signIn" @click="addGeneralize">获取微信报价</span></li>
			</ul>
		</div>
	</div>
</template>

<script>
	import _Bank from '@/assets/utils/bank'
	export default{
		name:'wachtQuote',
		data(){
			return{
				isGetCode:true,
				row:{
					phone: '',
					work_type:false,
					city: '北京',
					skill: '',
					customer_need: '',
					expected_date: '',
					baby_age: '',
					source:'SEM推广',
					source_url: window.location.href
				},
				cityList:[]
			}
		},
		watch:{
			
		},
		methods:{
			addGeneralize(){
				if (this.code == this.row.city) {
					if (_Bank.checkPhone(this.row.phone)) {
						let row = this.row
						data.work_type = data.work_type ? '育儿嫂':'月嫂'
						this.$http.post('addGeneralize', {row:this.row})
						.then(response=>{
							if (response.success) {
								this.$emit('input', 'makeSucceed');
							}
						})
					}else{
						alert('请输入正确的手机号码')
					}
				}else{
					alert('请选择城市')
				}
			},
			getCity(){
				let config = {
					baseURL:'http://admin.mumway.com/index/activity/cityList',
				}
				this.$http.post('cityList', {}, config)
				.then(response=>{
					if (response.success) {
						this.cityList = response.data
					}
				})
			},
		},
		mounted(){
			this.getCity()
			this.row.source = this.$store.getters.getSource
			
		}
	}
</script>

<style scoped lang="scss">
@import '@/assets/utils/utils.scss';

div.form{
	padding-top: 40px;
	padding-left: 50px;
	padding-right: 50px;
	padding-bottom: 50px;
	ul{
		li{
			margin-top: 20px;
			color: #666;
			font-size: 26px;
			select,
			input[type=number],
			input[type=text]{
				width: 100%;
				height: 90px;
				border:1px solid #999;
				background-color: #fff;
				padding:0 20px;
			}
			
			label{
				display: inline-block;
				width: 200px;
				line-height: 60px;
				position: relative;
				font-size: 28px;
				color: #454545;
				padding-left:58px;
				input[type=checkbox],
				input[type=radio]{
					display: none;
				}
				input[type=checkbox] + span,
				input[type=radio] + span{
					display: block;
					position: absolute;
					width: 41px;
					height: 40px;
					top:9px;
					left:6px;
					border-radius:50%;
					border:2px solid #ccc;
					background-color: #fff;
					&:after{
						content:'';
						position: absolute;
						top:18px;
						left:19px;
						width: 20px;
						height: 20px;
						border-radius:50%;
						background-color: #ccc;
						margin-top: -10px;
						margin-left: -10px;
						z-index: 9;
					}
				}
				input[type=checkbox]:checked + span,
				input[type=radio]:checked + span{
					border:2px solid #e77064;
					&:after{
						background-color: #e77064;
					}
				}
			}

			.signIn{
				display: inline-block;
				height: 90px;
				line-height: 90px;
				text-align: center;
				broder:1px solid #e1e1e1;
				border-radius:10px;
				font-size: 30px;
				background-color: #e77064;
				width: 100%;
				color: #fff;
				margin-top: 40px;
				
			}
		}
	}
}
.head{
	width: 100%;
	height: 136px;
	background-color: #fff;
	text-align: center;
	padding-top:50px;
	border-radius: 8px 8px 0 0;
	position: relative;
	.sanj{
		position: absolute;
		bottom:-45px;
		left:50%;
		width: 60px;
		height: 60px;
		border-radius:16px;
		background-color: #e4e3e3;
		margin-left: -30px;
		transform: rotate(45deg)

	}
	.title{
		font-size: 30px;
		font-weight: bold;
		color: #333;
		span{
			position: relative;
			display: inline-block;
			padding:0 30px;
			&:before,
			&:after{
				content:'';
				position: absolute;
				top:20px;
				width: 80px;
				height: 4px;
				background-color: #333;
				display: inline-block;
			}
			&:before{
				left:-80px;
			}
			&:after{
				right:-80px;
			}

		}
	}
	.dec{
		font-size: 24px;
		color: #333;
		margin-top: 10px;
	}

}

</style>